<template>
    <div>
        <div class="container">
            <div class="detail-top-left">
                <img :src="combinationItem.combinationImg">
                <div class="ys-ul clearfix">
                    <li><i class="el-icon-circle-check"></i>未约可退</li>
                    <li><i class="el-icon-circle-check"></i>民营医院</li>
                    <li><i class="el-icon-circle-check"></i>免费改期</li>
                    <li><i class="el-icon-circle-check"></i>检后咨询</li>
                    <li><i class="el-icon-circle-check"></i>报告权威</li>
                    <li><i class="el-icon-circle-check"></i>设备先进</li>
                    <li><i class="el-icon-circle-check"></i>优质服务</li>
                    <li><i class="el-icon-circle-check"></i>医疗团队</li>
                </div>
            </div>
            
            <div style="text-align: left">
                <p class="title">{{ combinationItem.combinationName }}</p>
                <p class="price">{{ combinationItem.combinationPrice }}￥</p>       
                <p class="intro">{{ combinationItem.combinationIntro }}</p> 
                <p class="getDetail">检测项目：{{ project }}</p>
                <div class="infoDetail">
                    <p><i class="el-icon-timer"></i>更新时间： {{ combinationItem.combinationUpdateTime }}</p>
                    <p><i class="el-icon-user"></i>适合人群：全部人群</p>
                    <p><i class="el-icon-first-aid-kit"></i>体检机构：中国福建省健景体检中心</p>
                    <p><i class="el-icon-map-location"></i>体检地址：中国福建省云隐康谷</p>
                    <p><i class="el-icon-time"></i>体检时间：全天通可</p>
                </div>
                <button @click="addShop" class="add">加入购物车</button>
                <button @click="buy" class="buy">立即预定</button>
            </div>
        </div>
        <hr class="hr-space-square">
        <div class="title2">>> 包含项目详情表</div>
        <template>
            <el-table
                :data="projects"
                style="width: 90%;margin-left: 5%"
                :row-class-name="tableRowClassName"
                :header-cell-style="rowClass">
                <el-table-column
                prop="projectId"
                label="项目id"
                width="217">
                </el-table-column>
                <el-table-column
                prop="projectName"
                label="项目名称"
                width="210">
                </el-table-column> 
                <el-table-column
                    prop="detailsUp"
                    label="包含细项"
                    width="210">
                    <template slot-scope="scope">
                        <button class="lookIncludeBtn" @click="getDetails(scope.row)">查看细项</button>
                        <el-dialog title="项目明细" 
                        append-to-body
                        :visible.sync="dialogTableVisible"
                        >
                            <el-table :data="gridData">
                                <el-table-column property="detailsName" label="细项名字" width="100"></el-table-column>
                                <el-table-column property="detailsUnit" label="单位" width="100"></el-table-column>
                                <el-table-column property="detailsUp" label="上限" width="100"></el-table-column>
                                <el-table-column property="detailsDown" label="下限" width="100"></el-table-column>
                                <el-table-column property="detailsCreateTime" label="创建时间"></el-table-column>
                            </el-table>
                        </el-dialog>
                    </template>
                </el-table-column>           
                <el-table-column
                    prop="projectUpdateTime"
                    label="更新时间"
                    width="240">
                </el-table-column>
                <el-table-column
                    prop="projectCreateTime"
                    label="创建时间"
                    width="240">
                </el-table-column>
            </el-table>
        </template>
        <hr class="hr-space-square">
        <div class="title2">>> 预约须知</div>
        <div class="process-inner">
            <ol>
                <li>
                    <h4>预约时间</h4>
                    <p>该医院支持提前2天，周六可约，周日可约，若支持当天预约请于当天08:30前下单</p>
                </li>
                <li>
                    <h4>营业时间</h4>
                    <p>全天</p>
                </li>
                <li>
                    <h4>体检地点</h4>
                    <p>中国福建省云隐康谷</p>
                </li>
                <li>
                    <h4>体检凭证</h4>
                    <p>体检当天凭借预约成功短信，现场出示身份证即可体检</p>
                </li>
                <li>
                    <h4>优惠信息</h4>
                    <p>会员在线支付时含“立减”字样的套餐，付款时会自动抵扣掉对应的金额。</p>
                </li>
                <li>
                    <h4>订单退改</h4>
                    <p>如客户预约成功后选择退款，需扣除套餐实付金额的10%作为服务费。最高扣款金额不超过100元。</p>
                </li>
                <li>
                    <h4>注意事项</h4>
                    <p>您预约套餐时，即表示接受检测的所有项目。如因自身原因放弃体检套餐中的检查项目，网站将不予退款处理。</p>
                </li>
                <li>
                    <h4>发票申请</h4>
                    <p>请在体检后到“我的订单”中申请，如需了解开票具体流程，可在提交订单后及时联系健景体检网客服。</p>
                </li>
            </ol>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            combinationItem:[],
            project:"",
            projects:[],
            dialogTableVisible: false,
            gridData:[],
            total:0,
        }
    },
    created(){
        
        this.combinationItem = JSON.parse(localStorage.getItem("combinationItem"));
        this.total = this.combinationItem.combinationPrice
        this.getProjectName();
        this.getProject();
    },
    methods:{
        getProjectName(){
            this.$axios.get(
                '/detail/getProjectName',
                {
                    params:{id:this.combinationItem.combinationId}
                }
            ).then(res=>{
                if(res!=undefined){
                    this.project=res.data
                }
            })
        },
        getProject(){
            this.$axios.get(
                '/detail/getProject',
                {
                    params:{id:this.combinationItem.combinationId}
                }
            ).then(res=>{
                if(res!=undefined){
                    this.projects=res.data
                }
            })
        },
        tableRowClassName({row, rowIndex}) {
            if (rowIndex % 2 === 0) {
                return 'warning-row';
            } else if (rowIndex % 2 === 1) {
                return 'success-row';
            }
        },
        rowClass({ rowIndex, columnIndex }) {
            return {background:'rgb(19, 161, 100)',color:'white'}
        },
        getDetails(row){
            this.dialogTableVisible = true
            this.$axios.get(
                '/detail/getDetails',
                {
                    params:{id:row.projectId}
                }
            ).then(res=>{
                console.log("项目包含的细项",res)
                if(res!=undefined){
                    this.gridData = res.data
                }
            })
        },
        addShop(){
            //添加项目的购物车，将用户id和项目id存入数据库中
            this.$axios.get(
                "/shop/addShopCombination",
                {
                    params:{
                        patientId:this.$store.state.patientId,
                        combinationId:this.combinationItem.combinationId,
                    }
                }
            ).then(res=>{
                // console.log(res)

                if(res != undefined){
                    if(res.code == 1){
                        this.$message({
                            showClose: true,
                            message: '加入购物车成功',
                            type: 'success'
                        });
                    }else{
                        this.$message.error("该商品已经添加过咯！")
                    }
                }
            })
        },
        buy(){
            this.$confirm('确定下单嘛？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                if(this.$store.state.patientMoney >= this.total){
                    this.$notify({
                        title: '商品购买',
                        showClose: true,
                        message: '商品下单成功！！！待收费员确认信息之后打印体检信息',
                        type: 'success'
                    });
                    this.addOrder()
                    this.money();

                }else{

                    this.$message.error("当前余额不足，请充值！")
                }
            }).catch(() => {
                this.$message({
                    showClose: true,
                    type: 'info',
                    message: '已取消购买'
                });          
            });
        },
        addOrder(){
            //订单编号
            const examId = new Date().getTime()
            this.$axios.get(
                '/order/addOrder',
                {
                    params:{
                        examId:examId,
                        patientId:this.$store.state.patientId,
                        totalMoney:this.total,
                        orderInfo:this.combinationItem.combinationName,
                        proOrCom:2,
                        adminId:4
                    }
                }
            ).then(res=>{
                console.log(res)
            })
        },
        money(){
            this.$axios.get(
                '/order/money',
                {
                    params:{
                        id:this.$store.state.patientId,
                        total:this.total
                    }
                }
            ).then(res=>{
                if(res != undefined){
                    this.$store.state.patientMoney = res.data
                }
            })
        }      
       
    },
}
</script>
<style scoped>
.el-table >>> .warning-row {
  background: rgb(212, 245, 229);
}
.el-table >>> .success-row {
  background: #a0f4ca;
}
 @import "../../static/css/detail.css";

</style>
